import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select } from 'antd'
const { Option } = Select;

const UserForm = forwardRef((props, ref) => {
    const [isDisabled, setisDisabled] = useState(false)
    useEffect(() => {
        setisDisabled(props.isUpdateDisabled)
    }, [props.isUpdateDisabled])

    const { roleId, region} = JSON.parse(localStorage.getItem('token'))

    const roleObj = {
        '1': 'superadmin',
        '2': 'admin',
        '3': 'editor'
    }
    // 判断是添加还是更新,是否禁用部分地区
    const checkRegionDisabled = (item) => {
        // 更新
        if (props.isUpdate) {
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return true
            }
            // 添加
        } else {
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return item.value !== region
            }
        }
    }
    // 判断是添加还是更新,是否禁用管理权限
    const checkRoleDisabled = (item) => {
        // 更新
        if (props.isUpdate) {
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return true
            }
            // 添加
        } else {
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return roleObj[item.id] !== 'editor'
            }
        }
    }
    return (
        <Form
            ref={ref}
            layout="vertical"
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[
                    {
                        required: true,
                        message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[
                    {
                        required: true,
                        message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                rules={[
                    {
                        required: isDisabled ? false : true,
                        message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Select disabled={isDisabled}
                // defaultValue=""
                // style={{
                //     width: '100%',
                // }}
                >
                    {
                        props.regionList.map(item =>
                            <Option value={item.value} key={item.id}
                                disabled={checkRegionDisabled(item)}>{item.value}</Option>)
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色名称"
                rules={[
                    {
                        required: true,
                        message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Select onChange={(value) => {
                    if (value === 1) {
                        // 禁用区域
                        setisDisabled(true)
                        // 将受控表单region内容置空
                        ref.current.setFieldsValue({
                            region: ''
                        })
                    } else {
                        setisDisabled(false)
                    }
                }}
                >
                    {
                        props.roleList.map(item =>
                            <Option value={item.id} key={item.id}
                                disabled={checkRoleDisabled(item)}>{item.roleName}</Option>)
                    }
                </Select>
            </Form.Item>

        </Form>
    )
})
export default UserForm